<template>
  <div class="login-title">
    <img class="icon" src="@/assets/image/logo.png" alt="logo" />
  </div>
  <a-form :model="formState" @finish="onFinish" @finishFailed="onFinishFailed">
    <a-form-item
      name="username"
      :rules="[{ required: true, message: '请输入账号' }]"
    >
      <a-input v-model:value="formState.username" placeholder="请输入账号">
        <template v-slot:prefix>
          <user-outlined />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item
      name="password"
      :rules="[{ required: true, message: '请输入密码' }]"
    >
      <a-input-password
        v-model:value="formState.password"
        placeholder="请输入密码"
      >
        <template v-slot:prefix>
          <lock-outlined />
        </template>
      </a-input-password>
    </a-form-item>
    <a-form-item style="width: 100%">
      <a-button
        type="primary"
        html-type="submit"
        class="login-btn"
        :loading="formState.loading"
      >
        登录
      </a-button>
    </a-form-item>
  </a-form>
</template>
<script setup>
import { reactive } from "vue";
import { message } from "ant-design-vue";
import { login } from "@/api/index";
import { useRouter } from "vue-router";
import { userStore } from "@/stores/modules/user";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";

const router = useRouter();
const formState = reactive({
  username: "",
  password: "",
  labelCol: {
    span: 12,
  },
  loading: false,
});

const onFinish = (values) => {
  formState.loading = true;
  login(values).then(function (res) {
    setTimeout(function () {
      formState.loading = false;
    }, 500);
    if (res.code == 0) {
      const data = res.data;
      const store = userStore();
      store.setUserInfo(data);
      router.push("/");
      message.success(res.msg);
    }
  });
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
</script>